<template>
  <view class="root">
    <view class="top">
      <map id="myMap" style="width: 100%; height: 744rpx;position: relative;" :latitude="latitude"
        :longitude="longitude" :scale="mapscale" :markers="markers" :enable-3D="true" :enable-satellite='weiXing'
        :show-location="true" @tap="mapTap" :polyline="polyline" :polygons="polygons">
      </map>
      <view class="device-box">
        <view class="i-name">
          IMEI码:{{details.imei || '暂无'}}
        </view>
        <view class="item">
          <view class="i-label">
            设备状态:
          </view>
          <view class="i-value">
            {{details.onLine === '0'? '离线': '在线'}}
          </view>
        </view>
        <view class="item">
          <view class="i-label">
            设备电量:
          </view>
          <view class="i-value">
            {{details.remainingPower ? `${details.remainingPower}%` : '暂无'}}
          </view>
        </view>
        <view class="item">
          <view class="i-label">
            设备SIM卡:
          </view>
          <view class="i-value">
            {{details.simNumber || '暂无'}}
          </view>
        </view>
      </view>

      <view class="bottom-box">
        <view class="location-i">
          <view class="left-box">
            <view class="address">
              {{details.address || '暂无'}}
            </view>
            <view class="time">
              <view class="label">
                更新时间:
              </view>
              <view class="value">
                {{details.updateTime || '暂无'}}
              </view>
            </view>
          </view>
          <view class="right-box">
            <view class="b-location" @click="handleRefresh">
              <image :src="baseImgUrl + 'r-6.png'" class="i-d"></image>
              刷新定位
            </view>
            <view class="b-track" @click="handleGo">
              <image :src="baseImgUrl + 'r-4.png'" class="i-c"></image>
              导航路线
            </view>
          </view>
        </view>
        <view class="solid"></view>

        <view class="b-box">
          <view class="item">
            <view class="i-item">
              <image :src="baseImgUrl + 'r-1.png'" class="i-icon"></image>
              <view class="i-text to-1">心率</view>
            </view>
            <view class="item-2">
              <text class="num">{{details.heartrate || '0'}}</text>
              <text class="unit">次/分</text>
            </view>
            <view class="item-3">
              参考值60~100次/分
            </view>
            <image class="r-img" :src="baseImgUrl + 'r-9.png'"></image>
          </view>
          <view class="item">
            <view class="i-item">
              <image src="" class="i-icon"></image>
              <view class="i-text to-2">血压</view>
            </view>
            <view class="item-2">
              <text class="num">{{details.dbp || '0'}}/{{details.sbp || '0'}}</text>
              <text class="unit">mmHg</text>
            </view>
            <view class="item-3">
              参考值60~80/100~120mmHg
            </view>
            <image class="r-img" :src="baseImgUrl + 'r-7.png'"></image>
          </view>
          <view class="item">
            <view class="i-item">
              <image :src="baseImgUrl + 'r-3.png'" class="i-icon"></image>
              <view class="i-text to-3">血氧</view>
            </view>
            <view class="item-2">
              <text class="num">{{details.bloodoxygen || '0'}}</text>
              <text class="unit">%</text>
            </view>
            <view class="item-3">
              参考值95%~98%
            </view>
            <!-- <image class="r-img" :src="baseImgUrl + 'r-2.png'"></image> -->
          </view>
          <view class="item">
            <view class="i-item">
              <image :src="baseImgUrl + 'r-5.png'" class="i-icon i-icon-4"></image>
              <view class="i-text to-4">步数</view>
            </view>
            <view class="item-2">
              <text class="num">{{details.stepValue || '0'}}</text>
              <text class="unit">步</text>
            </view>
            <view class="item-3">
              目标步数:10000步/天
            </view>
            <image class="r-img" :src="baseImgUrl + 'r-8.png'"></image>
          </view>
        </view>

      </view>
    </view>
    <view class="bottom">
      <view class="btn" @click="handleGoPicker">
        <image :src="baseImgUrl + 'voice-01.png'" class="left-icon"></image>
        远程拾音
      </view>
      <view class="btn right-btn" @click="handleCall">
        <image :src="baseImgUrl + 'phone-01.png'" class="right-icon"></image>
        拨打电话
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    deviceinfoHome
  } from '../api/api';
  import {
    Toast,
    getLocation,
    getOptionsParams,
    isLoading,
    navTo
  } from '../utils/util';

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        longitude: '',
        latitude: '',
        routerParams: {},
        details: {},
        markers: [],
        mapscale: 14,
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.initData()
    },
    methods: {
      async initData() {
        // let res = await getLocation()
        // this.longitude = res.longitude
        // this.latitude = res.latitude
        this.markers = []

        isLoading(true)
        deviceinfoHome({
            mentalPatientId: this.routerParams.id
          })
          .then((res) => {
            this.details = res.result
            this.markers.push({
              id: this.markers.length + 1,
              latitude: this.details.lat,
              longitude: this.details.lon,
              iconPath: this.$baseImgUrl + 'person-01.png',
              width: 45,
              height: 48,
            })

            this.longitude = this.details.lon
            this.latitude = this.details.lat
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handleGo() {
        uni.openLocation({
          latitude: this.details.lat, //维度
          longitude: this.details.lon, //经度
          name: this.details.address, //目的地定位名称
          scale: 15, //缩放比例
          address: this.details.address //导航详细地址
        })
      },
      handleCall() {
        if (!this.details.simNumber) {
          Toast('未获取到手机号！')
          return
        }
        uni.makePhoneCall({
          phoneNumber: this.details.simNumber
        })
      },
      handleRefresh() {
        this.initData()
      },
      handleGoPicker() {
        navTo({
          url: '/wristWatch/removePickup',
          params: {
            ...this.details
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

    .top {
      flex: 1;
      min-height: 0;
      overflow: auto;
    }

    .device-box {
      width: 718rpx;
      background: linear-gradient(180deg, #51B1FF 0%, #1790F2 100%);
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 33rpx 39rpx;
      top: 10rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);

      .i-name {
        font-weight: bold;
        font-size: 36rpx;
        color: #FAFAFA;
      }

      .item {
        display: flex;
        margin-bottom: 16rpx;

        .i-label {
          font-weight: 400;
          font-size: 28rpx;
          color: #FAFAFA;
          margin-right: 15rpx;
        }

        .i-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #FAFAFA;
        }
      }
    }


    .bottom-box {
      background: #FFFFFF;

      .location-i {
        display: flex;
        justify-content: space-between;
        padding: 48rpx 40rpx;
        width: 100%;

        .left-box {
          .address {
            font-weight: bold;
            font-size: 32rpx;
            color: #1A1A1A;
          }

          .time {
            display: flex;
            margin-top: 27rpx;
            margin-bottom: 30rpx;

            .label {
              font-weight: 400;
              font-size: 28rpx;
              color: #A1A1A1;
            }

            .value {
              font-weight: 500;
              font-size: 28rpx;
              color: #666666;
            }
          }
        }

        .right-box {
          display: flex;
          flex-direction: column;
          flex-shrink: 0;

          .b-location {
            background: #2488F5;
            border-radius: 37rpx 37rpx 37rpx 37rpx;
            padding: 12rpx 17rpx;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            margin-bottom: 40rpx;

            .i-d {
              width: 24rpx;
              height: 29rpx;
              margin-right: 9rpx;
            }
          }

          .b-track {
            padding: 12rpx 17rpx;
            background: #F4F5F7;
            box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
            border-radius: 37rpx 37rpx 37rpx 37rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #2488F5;

            .i-c {
              width: 24rpx;
              height: 31rpx;
              margin-right: 9rpx;
            }
          }
        }

        .right-box {}
      }

      .solid {
        width: 704rpx;
        border-bottom: 1px solid #d2d2d2;
        margin: 0 auto;
      }

      .b-box {
        display: flex;
        flex-wrap: wrap;
        padding: 20rpx;
        justify-content: space-between;

        .item {
          width: 48%;
          margin-bottom: 24rpx;
          padding: 28rpx 22rpx;
          background: #FFFFFF;
          box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          position: relative;

          .i-item {
            display: flex;
            position: relative;
            z-index: 1;
            align-items: center;

            .i-icon {
              width: 42rpx;
              height: 38rpx;
              margin-right: 8rpx;
            }

            .i-text {
              font-weight: bold;
              font-size: 32rpx;
            }

            .i-icon-4 {
              width: 32rpx;
              height: 39rpx;
            }
          }

          .item-2 {
            margin-top: 21rpx;
            margin-bottom: 19rpx;
            position: relative;
            z-index: 1;

            .num {
              font-weight: bold;
              font-size: 48rpx;
              color: #000000;
            }

            .unit {
              font-weight: 500;
              font-size: 24rpx;
              color: #333333;
              margin-left: 12rpx;
            }
          }

          .item-3 {
            font-weight: 400;
            font-size: 22rpx;
            color: #A9A9A9;
            position: relative;
            z-index: 1;
            white-space: nowrap;
          }

          .r-img {
            width: 123rpx;
            height: 112rpx;
            position: absolute;
            right: 0;
            bottom: 10rpx;
          }

          .to-1 {
            font-weight: bold;
            font-size: 32rpx;
            color: #F16164
          }

          .to-2 {
            font-weight: bold;
            font-size: 32rpx;
            color: #FBA025;
          }

          .to-3 {
            font-weight: bold;
            font-size: 32rpx;
            color: #AC9DFA;
          }

          .to-4 {
            font-weight: bold;
            font-size: 32rpx;
            color: #15C288;
          }
        }
      }
    }

    .bottom {
      flex-shrink: 0;
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 50rpx;

      .btn {
        width: 295rpx;
        height: 80rpx;
        background: #FB9424;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 36rpx;
        color: #FFFFFF;
      }

      .left-icon {
        width: 32rpx;
        height: 43rpx;
        margin-right: 18rpx;
      }

      .right-icon {
        width: 50rpx;
        height: 50rpx;
        margin-right: 25rpx;
      }

      .right-btn {
        background: #2488F5;
      }
    }
  }
</style>